﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TreeView - Fast Load</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.treeview.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treeview.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){
				$scope.treeName = "treeSample";
				$scope.localData = [];
				$scope.numItems = 50000;
				$scope.numLevels = 3;
				$scope.treeName = "treeSample";
				
				var itemCount = 0;
            
				// Make sure each node has a random set of child items
				var getRandomNumber = function(level){
					var nCount = 1 + Math.floor(Math.random() * 10);
					
					if (level === 0)
					{
						if ($scope.numLevels == 0)
							nCount = $scope.numItems;
						else
						{
							var derivative = 1;
							for (var k = 1; k <= $scope.numLevels; k++)
								derivative = (derivative * nCount) + 1;

							nCount = $scope.numItems / derivative + 1;
							if (nCount < 1000)
								nCount = 1000;
						}
					}
					
					return nCount;
				}
				
				// Recursive function for adding root and child items to the TreeView
				var addLarge = function(parentItem, level){
					if (level > $scope.numLevels)
						return;
						
					var numChilds = getRandomNumber(level);    
					for (var i = 0; i < numChilds; i++){
						if (itemCount < $scope.numItems){
							var item = {
								text : 'Item ' + (itemCount+1).toString(),
								id: itemCount,
								expanded : false
							};
								
							$treeService.addItem($scope.treeName, item, parentItem);
							itemCount++;
						
							addLarge(item, level + 1);
						}
					}
				};
           
				// Clear the content of TreeView
				var clearList = function(){
					$treeService.clearItems($scope.treeName);
					itemCount = 0;
				}
				
				$scope.add = function(){
					$treeService.suspendLayout($scope.treeName);
					
					clearList();
					
					// Populate the TreeView with data
					addLarge(null, 0);
					
					$treeService.resumeLayout($scope.treeName);
				}
				
				$scope.clear = function(){
					$treeService.suspendLayout($scope.treeName);
					
					clearList();
					
					$treeService.resumeLayout($scope.treeName);
				}
				
				$scope.expandAll = function(){
					$treeService.expand($scope.treeName);
				}
				
				
				$scope.collapseAll = function(){
					$treeService.collapse($scope.treeName);
				}
				
				
				$scope.$watch("numItems", function(newValue, oldValue){
					if (isNaN(newValue))
						$scope.numItems = oldValue;
				});
				
				$scope.$watch("numLevels", function(newValue, oldValue){
					if (isNaN(newValue))
						$scope.numLevels = oldValue;
				});
			}]);
    </script>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">TreeView / Fast Load</h2>
	        <div class="feature-content">
                <iui-treeview name="{{treeName}}" class="directive" items="localData" ></iui-treeview>
                <div class="control-panel">
					<table>
						<tr>
							<td>Max items: </td>
							<td class="align-left"><input type="number" ng-model="numItems" min="1" max="100000" style="width:75px" integer /></td>
						</tr>
						<tr>
							<td>Levels: </td>
							<td class="align-left"><input type="number" ng-model="numLevels" min="0" max="100" style="width:75px" integer /></td>
						</tr>
					</table>
					<div align="center" style="margin-top:20px">
						<button ng-click="add()" style="width:65px; margin-right:10px">Add</button>
						<button ng-click="clear()" style="width:65px">Clear</button>
					</div>
					<div align="center" style="margin-top:20px">
						<button ng-click="expandAll()" style="margin-bottom:5px;width:140px">Expand All</button>
						<button ng-click="collapseAll()" style="width:140px">Collapse All</button>
	                </div>
                </div>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>In this sample you can add large set of items to the TreeView. Although there is no limit on how many items you can add, for demonstration purposes we have limited the maximum number of items to 100,000.</p>
                    <p><span class="initial-space"></span>Using controls in right panel, you can add maximum of 100,000 items with maximum depth of 100 tree levels.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
